<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>付款明细重单审批</title>
    <style>
    </style>
</head>
<body>

<div v-loading="loading" id="organizationManage" class="organizationManage mainPadding"  style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20" >
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>总裁办处理</el-breadcrumb-item>
        <el-breadcrumb-item>付款明细重单审批</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
        <el-button type="primary" @click="dealButton">重单通过</el-button>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm">
                <el-form-item label="客户姓名:">
                  <el-input v-model="customerName" placeholder="客户姓名"></el-input>
                </el-form-item> 
          			<el-form-item label="签单商务组:">
          				<el-select filterable v-model="businessGroupId" placeholder="签单商务组" clearable>
          				    <el-option
          				      v-for="item in swList"
          				      :key="item.id"
          				      :label="item.name"
          				      :value="item.id">
          				    </el-option>
          				</el-select>
          			</el-form-item>
          			<el-form-item label="签单商务经理:">
          				<el-select filterable v-model="businessManagerId" placeholder="签单商务经理" clearable>
          				    <el-option
          				      v-for="item in businessManagerList"
          				      :key="item.id"
          				      :label="item.name"
          				      :value="item.id">
          				    </el-option>
          				</el-select>
          			</el-form-item>
                <el-form-item label="编辑时间:">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="beginTime" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-row v-show="isShow">
              			<el-form-item label="处理状态:">
              				<el-select filterable v-model="dealStatus" placeholder="处理状态" clearable>
              				    <el-option
              				      v-for="item in dealStatusList"
              				      :key="item.value"
              				      :label="item.label"
              				      :value="item.value">
              				    </el-option>
              				</el-select>
              			</el-form-item>
              			<el-form-item label="是否重单:">
              				<el-select filterable v-model="repeatStatus" placeholder="是否重单" clearable>
              				    <el-option
              				      v-for="item in dealList"
              				       :key="item.value"
              				      :label="item.label"
              				      :value="item.value">
              				    </el-option>
              				</el-select>
              			</el-form-item>
                  <el-form-item label="资源ID:">
                    <el-input v-model="clueId" placeholder="资源ID"  @keyup.native="number"></el-input>
                  </el-form-item>
                  <el-form-item label="客户手机号:" >
                    <el-input v-model="cusPhone" placeholder="客户手机号"></el-input>
                  </el-form-item>
                </el-row>
                <div class="mainSearchBtnBox">
          				  <el-button icon="el-icon-search" type="primary" @click="search"  class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
                </div>
            </el-form>
        </div>
        <el-row>
            <el-table 
                ref="multipleTable"
                tooltip-effect="dark"
                empty-text="无数据"
                style="width: 100%"
                border
                :data="dataTable"  @selection-change="handleSelectionChange">
                 <el-table-column align="center" prop="id" type="selection" width="55"></el-table-column> 
                 <el-table-column align="center" type="index"  label="序号" width="55"></el-table-column>
                 <!-- <el-table-column prop="date" label="全选" width="180"></el-table-column>  -->
                <el-table-column align="center" prop="signNo" label="签约单编号"></el-table-column>
                <el-table-column align="center" prop="signNo" label="付款明细">
    	            <template slot-scope="scope">
    	            	<a :href="'/clue/cluerepetition/repeatPaymentDetails?signId='+scope.row.id+''" style="color: rgb(0, 114, 255);">分配比例</a>
    	            </template>
                </el-table-column>
                <el-table-column align="center" prop="customerName" label="客户姓名">
                    <template slot-scope="scope">
                        {{scope.row.customerName}}
                        <span v-if="scope.row.inputType ==1">
                            <input type='hidden'><img th:src="@{/images/self_build.png}"  style="margin:0 10px;width:22px;cursor: pointer;vertical-align: middle;" alt="">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="cusPhone" label="客户手机号"></el-table-column>
                <el-table-column align="center"  prop="businessGroupName" label="签单商务组" ></el-table-column>
                <el-table-column align="center"  prop="businessManagerName" label="商务经理" ></el-table-column>
                <el-table-column align="center" prop="createTime" label="签约时间" :formatter="dateFormat"></el-table-column>
                <el-table-column align="center" prop="signProvince" label="签约省份" ></el-table-column>
                <el-table-column align="center" prop="signCity" label="签约城市" ></el-table-column>
                <el-table-column align="center" prop="signDictrict" label="签约区/县" ></el-table-column>
                <el-table-column align="center" prop="signType" label="签约类型" :formatter="transSignType"></el-table-column>
                <el-table-column align="center" prop="signShopType" label="签约店型" :formatter="transSignShopType"></el-table-column>
                <el-table-column align="center" prop="amountReceivable" label="应收金额" ></el-table-column>
                <!--<el-table-column align="center" prop="firstToll" label="路费" ></el-table-column>-->
                <!--<el-table-column align="center" prop="preferentialAmount" label="优惠金额" ></el-table-column>-->
                <!--<el-table-column align="center" prop="giveAmount" label="赠送金额" ></el-table-column>-->
                <el-table-column align="center" prop="signProjectName" label="签约项目" ></el-table-column>
                <el-table-column align="center" prop="signCompanyName" label="所属公司" ></el-table-column>
                <el-table-column align="center" prop="repeatStatus" label="重单结果" :formatter="transRepetition"></el-table-column>
                <el-table-column align="center" prop="repeatAuditStatus" label="处理状态" :formatter="transformStatus"></el-table-column>
                <el-table-column align="center" prop="repeatRemark" label="重单备注" ></el-table-column>
            </el-table>
             <table-pagination :pager="pager"  @change="inviteAreaListPage"></table-pagination>
        </el-row>      
    </div>

</div>
<input id="addOrUpdate" type="hidden" >
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">

    var swList=[[${swList}]];
	  var businessManagerList = [[${businessManagerList}]];
    var orgVM =  new Vue({
        el: '#organizationManage',
        data: {
          isShow:false,
        	endTime:"",
        	beginTime:"",
        	repeatStatus:"",
        	businessManagerId:"",
        	formLabelWidth: '100px',
        	form:{
        		dealStatus:"1"
        	},
        	
       	 	statusList:[
    		 	{
           			value: '0',
               		label: '待审批处理'	
           		},
           	{
              	value: '1',
               	label: '已审批处理'	
              }
    	],
    	dealList:[
   		 {
           	value: '0',
               label: '不重单'	
           	},
           	{
              value: '1',
               label: '重单'	
              }
    	],
    	dealStatusList:[
   		 {
        		value: '0',
            label: '待审批处理'	
        	},
        	{
           value: '1',
            label: '已审批处理'	
           }
 	  	],
       	 	dataTable:[],
       	 	multipleSelection: [],
       	    swList:swList,
       	 	businessManagerList:businessManagerList,
       	 	customerName:"",
       	 	dealStatus:"",
       	 	beginTime:"",
       	 	signProvince:"",
       	 	endTime:"",
       	 	businessGroupId:"",
       	 	teleGroupid:"",
       	 	valid:"",
            pager:{
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            loading:false,
            dialogFormVisible: false,
            rules: {
            	dealStatus: [
                    { required: true, message: '请选择有效性', trigger: 'blur' }
                ]
            }
             
        },
        methods: {
        	dealButton(){
        		
        		var rows = this.multipleSelection;
        		  if(rows.length <1){
                      this.$message({
                         message: '请选择数据',
                         type: 'warning'
                       });
                      return;
                  }
        	
        		  this.$confirm("确定要重单通过执行此操作?", '审核通过', {
                      confirmButtonText: '提交',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }).then(() => {
                     	// 查询 table 需要数据
                      var param = {};
                      var deleInfo=this.multipleSelection;
    	        	    var ids="";
    		            if(null!=deleInfo){
    		             for ( var i = 0; i <deleInfo.length; i++){
    		            	if("" == ids){
    		            		ids = deleInfo[i].id
    		            	}else{
    		            		ids = ids+","+deleInfo[i].id
    		            	}
    		             }
    		             var param={};
    		             param.ids=ids;
   	                 	axios.post('/clue/cluerepetition/updateBusinessPetitionById',param).then(function (response) {
   	                  	  //  console.log(response);
   	                       if(null !==response && response.data !=null && response.data.code=='0'){
   	                    	  window.location.href="/clue/cluerepetition/businessSignDealListPage"; 
   	                     	}else{
   	                     	orgVM.$message({
   	                            message: response.data.data.msg,
   	                            type: 'warning'
   	                          });
    	                  	 return ;
   	                     	} 
   	                  }).catch(function (error) {
                             console.log(error);
                         })
                         .then(function () {
                           // always executed
                         });  
    	              
                    }
                  }).catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消'
                      });          
                  });
                this.dialogFormVisible = true;
        	},
        	//日期数据格式化方法
    		dateFormat:function(row, column) {
    			var date = row[column.property];
               	if (date == undefined) {
    	               return "";
              	}
               	return moment(date).format("YYYY-MM-DD HH:mm:ss");
    		},
        	transformStatus(row, column, cellValue, index) {
          	  var text="";
                if(cellValue=="0"){
              	  text="待审批处理"
                }else if(cellValue=="1"){
              	  text="已审批处理"
                }
                return text;
            },
            transSignType(row, column, cellValue, index) {
            	  var text="";
                  if(cellValue=="2"){
                	  text="先交定金"
                  }else if(cellValue=="1"){
                	  text="一次性全款"
                  }
                  return text;
              },
              transSignShopType(row, column, cellValue, index) {
            	  var text="";
                  if(cellValue=="1"){
                	  text="旗舰店"
                  }else if(cellValue=="2"){
                	  text="创业店"
                  }else if(cellValue=="3"){
                	  text="标准店"
                  }else if(cellValue=="5"){
                	  text="区域代理"
                  }else if(cellValue=="6"){
                	  text="单技术"
                  }
                  return text;
              },
              transRepetition(row, column, cellValue, index) {
            	  var text="";
                  if(cellValue=="0"){
                	  text="不重单"
                  }else if(cellValue=="1"){
                	  text="重单"
                  }
                  return text;
              },
              
        	handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            search(){
            	this.pager.currentPage = 1;
            	this.inviteAreaListPage()
            },
        	inviteAreaListPage(){//查询按钮
            	  var param = {}; 
            	  var pageSize = this.pager.pageSize;
                  var pageNum = this.pager.currentPage;
                  param.businessGroupId = this.businessGroupId;
                  param.businessManagerId = this.businessManagerId;
                  param.dealStatus = this.dealStatus;
                  param.repeatStatus = this.repeatStatus;
                  param.beginTime = this.beginTime;
                  param.endTime = this.endTime;
                  param.customerName = this.customerName;
                  param.cusPhone = this.cusPhone;
                  param.clueId = this.clueId;
                  param.pageNum = pageNum;
                  param.pageSize = pageSize;
                  if(this.beginTime !=null && this.beginTime != '' && this.endTime !=null && this.endTime != '' && this.beginTime>this.endTime){
                  	  this.$message("开始时间不能大于结束时间");
             	         return;
                    }
                  axios.post('/clue/cluerepetition/businessSignDealList',param).then(function (response) {
                  	  // console.log(response);
                      if(null===response||response.data==null||response.data.code!='0'){
                    	  orgVM.$message({
                              message: response.data.msg,
                              type: 'warning'
                            });
	                  	  return ;
                     }else{
                    	 orgVM.dataTable =response.data.data.data; 
                    	 orgVM.pager.currentPage= response.data.data.currentPage;
                    	 orgVM.pager.total= response.data.data.total;
                     } 
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
                  .then(function () {
                  });  
                  
              	} ,
                addbutton(){
              		var rows = this.multipleSelection;
                    if(rows.length <1){
                        this.$message({
                           message: '选择某一条或者多条签约信息',
                           type: 'warning'
                         });
                        return;
                    }
                    var ids="";
 		            if(null!=rows){
 		             for ( var i = 0; i <rows.length; i++){
 		            	if("" == ids){
 		            		ids = rows[i].id
 		            	}else{
 		            		ids = ids+","+rows[i].id
 		            	}
 		             }
                	}
 		           var param={};
		           param.ids=ids;
		           param.valid = this.form.dealStatus;
		           axios.post('/businesssign/updateBusinessSignDTOValidByIds',param).then(function (response) {
	                  	  // console.log(response);
	                      if(null !==response && response.data !=null && response.data.code=='0'){
	                    	  window.location.href="/businesssign/businessSignValidPage"; 
	                     }else{
	                    	 orgVM.$message({
	   	                            message: response.data.data.msg,
	   	                            type: 'warning'
	   	                          });
	                  	  	return ;
	                     } 
	                  }).catch(function (error) {
                       console.log(error);
                   })
                   .then(function () {
                     // always executed
                   });
              	},
                toogleClick(){
                    if(this.isShow){
                        this.isShow=false
                    }else{
                        this.isShow=true
                    }          
                },
        },
        created(){
          var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
          if(localVal){this.pager.pageSize = localVal;}
        	this.inviteAreaListPage();
        	document.getElementById('organizationManage').style.display = 'block';
        	
        	
        }
    })
</script>
</html>